

(function ($) {
  
  $(function(){
    debug();
  });
  debug = function ( object ){
    
    $('#map_canvas')
      .before('<div id="debug" style="display: none;" />');
    $('#debug')
      .append('<div class="debugSelect"><select id="debugObjects" /></div>')
      .append('<div class="debugDirections"></div>')
      .append('<div class="coordinates object" />')
      .append('<div class="coordinates mouse" />')
      .append('<div class="coordinates center" />');
    $('#debug .debugDirections')
      .append('<a href="#" class="nn">N++</a> | <a href="#"  class="n">N</a>&nbsp;&nbsp; || &nbsp;&nbsp;')
      .append('<a href="#"  class="s">S</a> | <a href="#"  class="ss">S++</a>&nbsp;&nbsp;&nbsp; || &nbsp;&nbsp;&nbsp;')
      .append('<a href="#"  class="ww">W++</a> | <a href="#"  class="w">W</a>&nbsp;&nbsp; || &nbsp;&nbsp;')
      .append('<a href="#"  class="e">E</a> | <a href="#"  class="ee">E++</a>');
    
    $('#debugObjects').append('<option value="">choose marker</option>');
    for ( var i in content ) {
      $('#debugObjects').append('<option value="'+ i +'">Content '+ i +' - marker</option>');
    }
    $('#debugObjects').live('change',function(event){
      var index = $(this).val();
      debugObject( content[index].marker )
    });
    
    
    map.setOptions({
      draggableCursor: "crosshair",
      draggingCursor: "crosshair"
    });    
    var debug = $("#debug")[0];
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(debug);
    setTimeout(function() { $("#debug").show(); }, 250);
    
    google.maps.event.addListener(map, 'dragend', function(event) {
      output('center', map.getCenter());
    });
    
    google.maps.event.addListener(map, 'click', function(event) {
      output('mouse', event.latLng);
    });
    
    if (object){
      debugObject( object );
    }
  }
  
  debugObject = function ( object ) {
    output('object', object.getPosition());
    
    var bigStepNS = 0.1;
    var smallStepNS = 0.005;
    var bigStepEW = 0.5;
    var smallStepEW = 0.005;
    
    var x = {"nn":bigStepNS, "n":smallStepNS, "s":-smallStepNS, "ss": -bigStepNS, "ee":0, "e":0, "w":0, "ww":0};
    var y = {"ee":bigStepEW, "e":smallStepEW, "w":-smallStepEW, "ww": -bigStepEW, "nn":0, "n":0, "s":0, "ss":0};
    
    $("#debug").find(" a").live("click",function(e){
      e.preventDefault();
      var oldPosition = object.getPosition();
      var direction = $(this).attr("class");
      
      object.setPosition(new google.maps.LatLng(oldPosition.lat() + x[direction], oldPosition.lng() + y[direction]));
        output('object', object.getPosition());
    });
  }
  
  output = function( target, value ) {
    $("#debug").find(' .coordinates.'+target).html('coordinates ' + target + ':<br /><input type="text" value="' + value + '" />');
  }
})( jQuery );

